<template>
  <div>
    <el-table
      :data="orders"
      border
      tooltip-effect="dark"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      ref="table"
    >

      <el-table-column
        type="selection"
        width="46" fixed="left">
      </el-table-column>

      <el-table-column
        label="订单编号" width="120"
      >
        <template slot-scope="scope">{{ scope.row.sn }}</template>
      </el-table-column>
      <el-table-column label="下单时间" width="160" prop="createTime">
      </el-table-column>

      <el-table-column
        label="商品信息" width="110">
        <template slot-scope="scope">
          <h-good-info-display v-model="scope.row" :displayInfo="false"></h-good-info-display>
        </template>
      </el-table-column>

      <el-table-column label="商品规格" min-width="100">
        <template slot-scope="scope">
          <h-specs-display v-model="scope.row"></h-specs-display>
        </template>
      </el-table-column>

      <el-table-column label="订单信息" min-width="200">
        <template slot-scope="scope">
          <h-order-info-display v-model="scope.row" :create-time="false"></h-order-info-display>
        </template>
      </el-table-column>

      <el-table-column
        label="订单金额"
        min-width="150">
        <template slot-scope="scope">
          <h-order-pay-info-display v-model="scope.row"/>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" width="120">
        <template slot-scope="scope">
          <h-order-status-display v-model="scope.row" :arrival="true" :pay="true"
                                  :apply="true"></h-order-status-display>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100px" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="applyOrder(scope.$index,scope.row)">
            申请发货
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="row">
      <div class="col h-pagination">
        <div v-if="orders.length>0" style="float: left;margin-left: 5px;">
          <el-button type="primary" @click="applyOrders"><i class="fa fa-cart-plus"></i> 批量申请发货</el-button>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="search.pagination.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="search.pagination.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="search.pagination.total" class="float-right">
        </el-pagination>
      </div>
    </div>
    <h-order-apply-dailog :show.sync="applyDialogShow" @success="applySuccess" title="发货申请"
                          v-model="currentData"></h-order-apply-dailog>
  </div>
</template>
<script>
  import HContainer from 'src/components/shop/layout/Container'
  import HDateRangePicker from 'src/components/common/HDateRangePicker'
  import FrontService from 'src/service/front'
  import HOrderStatusDisplay from 'src/components/common/display/HOrderStatusDisplay'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'
  import HOrderInfoDisplay from 'src/components/common/display/HOrderInfoDisplay'
  import HOrderApplyDailog from 'src/components/shop/common/HOrderApplyDialog'
  import HOrderPayInfoDisplay from 'src/components/common/display/HOrderPayInfoDisplay'


  export default {
    name: 'HDeliverDisplay',
    components: {
      HContainer,
      HDateRangePicker,
      HOrderStatusDisplay,
      HGoodInfoDisplay,
      HSpecsDisplay,
      HOrderInfoDisplay,
      HOrderApplyDailog,
      HOrderPayInfoDisplay
    },
    data() {
      return {
        search: {
          orderDate: [],
          arrival: 2,
          pay: 1,
          apply: 0,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          orderBy: "arrival desc"
        },
        selectOrders: [],
        currentData: [],
        applyDialogShow: false,
        loading: false,
        orders: [],
      }
    },
    props: {
      date: {
        type: Array
      },
      type: {
        type: Number,
        default: 0
      }
    },
    watch: {
      type: function (c, d) {
        if (c == 0) {
          if (this.orders.length == 0) {
            this.getDatas();
            this.getOrder();
          }
        }
      }
    },
    methods: {
      applyOrder: function (index, data) {
        this.currentData = [data];
        this.applyDialogShow = true;
      },
      handleSelectionChange: function (v) {
        this.selectOrders = v;
      },
      applyOrders: function () {
        this.currentData = this.selectOrders;
        this.applyDialogShow = true;
      },
      applySuccess: function (data) {
        this.getDatas()
        this.applyDialogShow = false
      },
      handleSizeChange: function (size) {
        this.search.pagination.size = size
        this.getDatas()
      },
      handleCurrentChange: function (page) {
        this.search.pagination.page = page
        this.getDatas()
      },
      getDatas: function () {
        const me = this
        me.loading = true
        FrontService.orderSearch(this.search).then(d => {
          if (d != null) {
            me.orders = d.datas
            me.search.pagination = d.pagination
          }
          me.loading = false
        })
      },
      searchData: function () {
        this.search.pagination.page = 1;
        this.search.orderDate = this.date;
        this.getDatas()
      }
    },
    mounted: function () {
      this.getDatas()
    }
  }
</script>
